﻿@model eNote.Models.Note
@{  
    Script.Require("MicrosoftAjax.js").AtHead();
    Script.Require("MicrosoftMvcAjax.js").AtHead();
    Script.Require("MicrosoftMvcValidation.js").AtHead();
    Script.Require("jQueryUI_Selectable").AtHead(); 
    Script.Require("jquery.unobtrusive-ajax.min.js").AtHead();
}
<script type="text/javascript">
    function onsaved() {
        alert('Saved');
    }
    function onfailsave() {
        alert('Failure')
    }
</script>
<style>
    textarea
    {
        font-family: Tahoma,Arial;
        font-size: large;
        width: 100%;
        height: 400px;
    }
    
    .eNote .button
    {
        background: #5C6FA2;
        color: White;
        font-weight: bold;
        border: none;
    }
    
    .eNote .button:hover
    {
        background: #C7CEDF;
    }
    
    .eNote a, .button
    {
        width: 100px;
        height: 30px;
        background: #5C6FA2;
        text-decoration: none;
        padding: 10px;
        color: White;
        -webkit-transition: all 0.3s;
        font-weight: bold;
    }
    
    .eNote a:hover, input:hover
    {
        background: #C7CEDF;
    }
</style>
<div class="eNote">
    <section style="height: 30px; margin-top: 10px">
        @Html.ActionLink("NOTE", "Index")
        @Html.ActionLink("VOCA", "GetNoteView", new { f = "voca", flexMode = true })
    </section>
    <section>
        <h1 style="font-weight: bold">
            File: @Model.FName</h1>
        @using (Ajax.BeginForm("SaveNote", @Model,
        new AjaxOptions { HttpMethod = "POST", OnSuccess = "onsaved", OnFailure = "onfailsave" }))
        {    
            @Html.TextAreaFor(model => model.Text)
            <input class="button" value="Save" type="submit" />
        }
    </section>
</div>
